<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挂号信息</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <style>
        body{
            margin-right: 50px;
            margin-left: 50px;
        }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
      </style>
</head>
<body>
    <div id="app">

        <!-- 导航栏 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">患者信息</el-menu-item>
            <el-menu-item index="2">医生信息</el-menu-item>
            <el-menu-item index="3">账单信息</el-menu-item>
            <el-menu-item index="4">挂号信息</el-menu-item>
          </el-menu>
 

          <br/>
          <!-- 查询,删除 -->
          <el-form :inline="true" :model="searchByCondition" class="demo-form-inline">
            <el-form-item label="医生姓名" >
              <el-input style="width: 100px;" v-model="searchByCondition.doctorName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="医生id">
              <el-input style="width: 200px;" v-model="searchByCondition.doctorId" placeholder="身份证号"></el-input>
            </el-form-item>
            <el-form-item label="患者姓名" >
              <el-input style="width: 100px;" v-model="searchByCondition.patientName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="患者id">
              <el-input style="width: 200px;" v-model="searchByCondition.patientId" placeholder="身份证号"></el-input>
            </el-form-item>
            <el-form-item label="科室">
              <el-select style="width: 120px;" v-model="searchByCondition.department" placeholder="科室">
                <el-option label="内科" value="内科"></el-option>
                <el-option label="儿科" value="儿科"></el-option>
                <el-option label="妇产科" value="妇产科"></el-option>
                <el-option label="皮肤科" value="皮肤科"></el-option>
                <el-option label="传染科" value="传染科"></el-option>
                <el-option label="急诊科" value="急诊科"></el-option>
                <el-option label="门诊科" value="门诊科"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="日期">
              <el-date-picker
              v-model="searchByCondition.time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>  
            </el-form-item>

        
            <el-form-item>
              <el-button type="primary" @click="getByCondition">查询</el-button>
              <el-button type="success" @click="getAllRegistrations" plain>查询全部</el-button>
      <el-button type="warning" @click="addFormVisible=true" plain>添加挂号单</el-button>
          
            </el-form-item>
          </el-form>
          <br/>



<!-- 表格 -->
    <template>
        <el-table
          :data="registrations"
          style="width: 100%">
          <el-table-column type="expand">


            
            <template slot-scope="props">
                
              <el-form label-position="left" inline class="demo-table-expand">


                <el-form-item label="挂号单 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="挂号时间">
                    <span>{{ props.row.time }}</span>
                  </el-form-item>
                  <el-form-item label="主要症状">
                    <span>{{ props.row.symptoms }}</span>
                  </el-form-item>
                <el-form-item label="患者姓名">
                    <span>{{ props.row.patientName }}</span>
                  </el-form-item>
                <el-form-item label="用户 ID">
                  <span>{{ props.row.patientId }}</span>
                </el-form-item>

                <el-form-item label="医生姓名">
                  <span style="cursor: pointer; color:green" @click="getDoctorById(props.row.doctorId)">{{ props.row.doctorName }}</span>
                </el-form-item>

                <el-form-item label="科室">
                  <span>{{ props.row.department }}</span>
                </el-form-item>
      
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
          type="index"
          label="序号"
          width="100"
          >
        </el-table-column>
          <el-table-column
            label="挂号单id"
            prop="id">
          </el-table-column>
          <el-table-column
            label="患者姓名"
            prop="patientName"
            >
          </el-table-column>
          <el-table-column
            label="症状"
            prop="symptoms">
          </el-table-column>
          <el-table-column
          label="挂号时间"
          prop="time">
        </el-table-column>
        </el-table>
      </template>



      <!-- 添加弹窗 -->
<el-dialog title="添加挂号信息" :visible.sync="addFormVisible" width="35%">
  <el-form :model="addForm" :rules="rules">
    <el-form-item   label="患者姓名" :label-width="formLabelWidth" prop="patientName">
      <el-input placeholder="请输入患者姓名" style="width: 350px;" v-model="addForm.patientName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="患者身份证号" :label-width="formLabelWidth" prop="patientId">
      <el-input placeholder="请输入患者身份证号" style="width: 350px;" v-model="addForm.patientId" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="患者性别" :label-width="formLabelWidth" prop="gender">
      <el-select  style="width: 350px;" v-model="addForm.gender" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>

 
    <el-form-item label="医生" :label-width="formLabelWidth" prop="doctorId">
      <el-select  style="width: 350px;" v-model="addForm.doctorId" placeholder="请选择医生">
        <el-option v-for="item in doctors" :label="`${item.name}：${item.id}`" :value="`${item.id}`"></el-option>
        <!-- <el-option label="女" value="女"></el-option> -->
      </el-select>
      <!-- <el-input placeholder="请输入医生身份证号" style="width: 350px;" v-model="addForm.doctorId" autocomplete="off"></el-input> -->
    </el-form-item>

    <el-form-item label="主要症状" :label-width="formLabelWidth" prop="symptoms">
      <el-input placeholder="请输入主要症状" style="width: 350px;" v-model="addForm.symptoms" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="日期" :label-width="formLabelWidth" prop="time">
      <el-date-picker
      
      v-model="addForm.time"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>  
    </el-form-item>

    <el-form-item label="问诊费用" :label-width="formLabelWidth" prop="officeVisFee">
      <el-input placeholder="请输入问诊费用" style="width: 350px;" v-model="addForm.officeVisFee" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="药品费用" :label-width="formLabelWidth" prop="drugFee">
      <el-input placeholder="请输入药品费用" style="width: 350px;" v-model="addForm.drugFee" autocomplete="off"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add">确 定</el-button>
    <el-button @click="addForm={}" type="warning">重置</el-button>
    <el-button @click="addFormVisible = false">取 消</el-button>
  </div>
</el-dialog>



<!-- 医生信息栏 -->
<el-dialog
title="医生信息"
:visible.sync="dialogVisibleDoctor"
width="30%"
v-model="doctor"
:before-close="handleClose"
> 
<div style="padding: 35px;">
   <h2>身份证号：{{doctor.id}}</h2>
   <h2>姓名:    {{doctor.name}}</h2>
   <h2>性别:    {{doctor.gender}}</h2>
   <h2>专业:    {{doctor.specialty}}</h2>
   <h2>科室:    {{doctor.department}}</h2>
   
  </div>
<span slot="footer" class="dialog-footer">

  <el-button type="primary" @click="dialogVisibleDoctor = false">确 定</el-button>
</span>
</el-dialog>

    </div>
</body>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/registration.js"></script>
</html>